<template>
  <div name="transportpool">
    <div class="transportpoolData">
      <div class="transportpool">
        <div class="header">
          <div class="header_left">
            <el-button type="primary" size="mini" plain @click="creation(0)"
              >新增</el-button
            >
            <el-button type="primary" size="mini" plain @click="deletedata()"
              >删除</el-button
            >
            <el-button type="primary" size="mini" plain @click="exportFile()"
              >导出</el-button
            >
            <el-dropdown style="margin-left: 10px" @command="dropdown">
              <el-button type="primary" size="mini" plain>
                导入<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="1">汽运(个体,车队)</el-dropdown-item>
                <el-dropdown-item command="2"> 汽运(物流公司)</el-dropdown-item>
                <el-dropdown-item command="3">非汽运</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-tag
              style="
                height: 27px;
                line-height: 27px;
                margin-left: 10px;
                border-color: #92d6ff;
                background-color: #e6f7ff;
                padding: 0px 10px 0px 10px;
              "
            >
              <span style="font-weight: bold; color: black">共&nbsp;</span>
              <span style="color: #ff9800; font-weight: bold">{{
                overviewdata.transport_capacity_number
              }}</span>
              <span style="font-weight: bold; color: black"
                >&nbsp;家运力,&nbsp;</span
              >
              <span style="color: #ff9800; font-weight: bold">{{
                overviewdata.trucks_number
              }}</span>
              <span style="font-weight: bold; color: black"
                >&nbsp;辆货车,&nbsp;</span
              >
              <span style="color: #ff9800; font-weight: bold">{{
                overviewdata.refrigerated_trucks_number
              }}</span>
              <span style="font-weight: bold; color: black"
                >&nbsp;辆冷藏车&nbsp;</span
              >
              <!-- <span>{{ noAccount ? noAccount : 0 }}</span> -->
            </el-tag>
            <!-- <el-tag style="margin-left: 10px; padding-top: 10px;">
                            <span>已对账合计：</span>
                            <span>{{ 11}}，</span>
                            <span>未对账合计：</span>
                            <span>{{12 }}</span>
                        </el-tag> -->
          </div>
          <div class="header_right">
            <el-button
              type="primary"
              size="mini"
              @click="resultClickFn"
              style="margin: 0px 10px 0px 0px"
              >重置</el-button
            >
            <SettinUp
              :settype="17"
              :objSettinUpdata="objSettinUp"
              key="3"
            ></SettinUp>
          </div>
        </div>
      </div>
      <div class="table" v-if="HeaderData.length > 0">
        <TableHeader
          ref="TableHeaderList"
          :header_data_list="header_data_list"
          :HeaderData="HeaderData"
          :propMap="propMap"
          :objheader="objheader"
          @childEvent="handleDelete"
          @orderIdNumsEvent="handleDeleteType"
          :operation_type="operation_type"
          particulars="transport_capacity_detail"
          redact="transport_capacity_update"
          @handleClickDetail_second="handleClickDetail_second"
          @handleClickEdit_second="handleClickEdit_second"
        ></TableHeader>
      </div>
      <div class="paging">
        <div style="display: flex; justify-content: flex-end; margin-top: 10px">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="page_size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalPage"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <div v-if="drawerfalse">
      <ImpoterData
        :drawerData="drawerfalse"
        @clImport="closeimport"
        :moduleobj="moduleObj"
        @submitData="submitimport"
      ></ImpoterData>
    </div>
    <div class="popup">
      <el-drawer
        :title="titlename"
        :visible.sync="dialogVisible"
        direction="rtl"
        size="80%"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-position="top"
          class="inputForm"
          :disabled="poolTypeobj"
        >
          <div
            style="
              height: 50%;
              background: #ffffff;
              margin: 10px 10px 10px 10px;
              padding: 20px;
              border-radius: 10px;
            "
          >
            <el-row :gutter="24">
              <el-col :span="6">
                <el-form-item label="运力类型" prop="type">
                  <el-select
                    v-model="ruleForm.type"
                    placeholder="请选择运力类型"
                  >
                    <el-option
                      v-for="item in transport_type"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="所属地" prop="address">
                  <el-cascader
                    v-model="ruleForm.address"
                    ref="editCascader"
                    placeholder=""
                    :options="addresssequence"
                    clearable
                    filterable
                    :props="{
                      value: 'id',
                      label: 'name',
                      children: 'next_level_data',
                      checkStrictly: true,
                    }"
                  ></el-cascader>
                </el-form-item>
              </el-col>
              <span v-if="ruleForm.type == 0">
                <el-col :span="6" v-if="ruleForm.type == 0">
                  <el-form-item label="承运商类型" prop="carrier_type">
                    <el-select
                      v-model="ruleForm.carrier_type"
                      placeholder="请选择运力类型"
                    >
                      <el-option
                        v-for="item in carrier_type_type"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6" v-if="ruleForm.carrier_type == 3">
                  <el-form-item label="物流公司名称">
                    <el-input v-model="ruleForm.name"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" v-else>
                  <el-form-item label="联系人">
                    <el-input v-model="ruleForm.name"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item
                    label="联系电话"
                    prop="phone"
                    :rules="{
                      required: reqTrue,
                      message: '请输入联系方式',
                      trigger: 'blur',
                    }"
                  >
                    <el-input v-model="ruleForm.phone"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" v-if="ruleForm.type == 0">
                  <el-form-item label="含票税点" prop="tax_included_point">
                    <el-select
                      v-model="ruleForm.tax_included_point"
                      placeholder="请选择运力类型"
                    >
                      <el-option
                        v-for="item in taxpoint"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <!-- ----===================== -->
                <el-col :span="6">
                  <el-form-item label="承运环节" prop="phone">
                    <el-checkbox-group v-model="ruleForm.carrier_link">
                      <el-checkbox label="1"> 干线 </el-checkbox>
                      <el-checkbox label="2"> 落地配 </el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
                <div v-if="ruleForm.carrier_type == 3">
                  <el-col :span="6">
                    <el-form-item label="承运能力" prop="carrier_ability">
                      <el-select
                        v-model="ruleForm.carrier_ability"
                        multiple
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in carrier_ability_type"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col
                    :span="6"
                    v-if="ruleForm.carrier_ability.some((obj) => obj == 1)"
                  >
                    <el-form-item label="临床临检" prop="clinic">
                      <el-checkbox-group v-model="ruleForm.clinic">
                        <el-checkbox label="1"> 临床 </el-checkbox>
                        <el-checkbox label="2"> 临检 </el-checkbox>
                      </el-checkbox-group>
                    </el-form-item>
                  </el-col>
                  <el-col
                    :span="6"
                    v-if="
                      ruleForm.carrier_ability.some((obj) => obj == 1) ||
                      ruleForm.carrier_ability.some((obj) => obj == 2)
                    "
                  >
                    <el-form-item label="资产" prop="property">
                      <el-select
                        v-model="ruleForm.property"
                        multiple
                        placeholder="危险品操作资质"
                      >
                        <el-option
                          v-for="item in propertyType"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value + ''"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col
                    :span="6"
                    v-if="ruleForm.clinic.some((obj) => obj == 2)"
                  >
                    <el-form-item
                      label="危险品操作资质"
                      prop="is_dangerous_aptitude"
                    >
                      <el-select
                        v-model="ruleForm.is_dangerous_aptitude"
                        placeholder="危险品操作资质"
                      >
                        <el-option
                          v-for="item in whether"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value + ''"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </div>
                <div
                  v-if="
                    ruleForm.carrier_type == 1 || ruleForm.carrier_type == 2
                  "
                >
                  <el-col :span="6" style="height: auto">
                    <el-form-item label="驾驶证" prop="phone">
                      <UploadLink
                        :files.sync="ruleForm.driver_license"
                      ></UploadLink>
                    </el-form-item>
                  </el-col>
                </div>
              </span>
              <span v-else>
                <el-col :span="6">
                  <el-form-item label="是否货代" prop="is_forwarder">
                    <el-radio v-model="ruleForm.is_forwarder" label="1"
                      >是</el-radio
                    >
                    <el-radio v-model="ruleForm.is_forwarder" label="0"
                      >否</el-radio
                    >
                  </el-form-item>
                </el-col>
                <el-col :span="6" v-if="ruleForm.is_forwarder == 1">
                  <el-form-item label="货代名称" prop="forwarder_name">
                    <el-input v-model="ruleForm.forwarder_name"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="联系人">
                    <el-input v-model="ruleForm.name"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="联系电话" prop="phone">
                    <el-input v-model="ruleForm.phone"></el-input>
                  </el-form-item>
                </el-col>
                <el-col
                  :span="6"
                  v-if="ruleForm.type == 3 && ruleForm.is_forwarder == 1"
                >
                  <el-form-item label="是否为一级代理" prop="is_primary_agent">
                    <el-radio v-model="ruleForm.is_primary_agent" label="1"
                      >是</el-radio
                    >
                    <el-radio v-model="ruleForm.is_primary_agent" label="0"
                      >否</el-radio
                    >
                  </el-form-item>
                </el-col>
                <el-col
                  :span="6"
                  v-if="
                    ruleForm.type == 3 &&
                    ruleForm.is_primary_agent == 1 &&
                    ruleForm.is_forwarder == 1
                  "
                >
                  <el-form-item label="一级代理资质证明" prop="audit_report">
                    <el-upload
                      class="upload-demo"
                      ref="add-upload"
                      action
                      multiple
                      :auto-upload="false"
                      :file-list="ruleForm.audit_report"
                      :on-change="
                        (file, fileList) => {
                          handleChange(file, fileList, 24);
                        }
                      "
                      :on-remove="
                        (file, fileList) => {
                          removeChange(file, fileList, 24);
                        }
                      "
                      name="上传文件"
                    >
                      <el-button
                        slot="trigger"
                        size="small"
                        icon="el-icon-upload2"
                        style="width: 172px"
                      >
                        上传文件</el-button
                      >
                      <div slot="file" slot-scope="{ file }">
                        <li class="el-upload-list__item is-success">
                          <a
                            @click="() => openUrl(file)"
                            class="el-upload-list__item-name"
                          >
                            <i class="el-icon-document"></i>{{ file.name }}
                          </a>
                          <label class="el-upload-list__item-status-label">
                            <i
                              class="el-icon-upload-success el-icon-circle-check"
                            ></i>
                          </label>
                          <i
                            @click.stop="removeChange(file)"
                            class="el-icon-close"
                          ></i>
                        </li>
                      </div>
                    </el-upload>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item
                    label="车站/机场/港口名称"
                    prop="station_airport_port_name"
                  >
                    <el-input
                      v-model="ruleForm.station_airport_port_name"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </span>
            </el-row>
          </div>
          <!-- 车辆信息 -->
          <div
            v-if="ruleForm.type == 0"
            style="
              height: 50%;
              background: #ffffff;
              margin: 10px 10px 10px 10px;
              padding: 20px;
              border-radius: 10px;
            "
          >
            <el-table
              ref="singleTable"
              :data="ruleForm.vehicle"
              border
              highlight-current-row
            >
              <el-table-column type="index" width="50">
                <template slot="header" slot-scope="scope">
                  <span @click="addShiperCar(scope)" style="font-size: 20px"
                    >+</span
                  >
                </template>
                <template slot-scope="scope">
                  <div class="remodername">
                    <div class="number">{{ scope.$index + 1 }}</div>
                    <div
                      class="remodercenter el-icon-minus"
                      @click="reduceCar(scope.$index)"
                    ></div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                v-if="ruleForm.carrier_type == 1"
                property="plate_number"
                label="车牌号"
                key="1"
              >
                <template slot="header">
                  <span style="color: red">*车牌号</span>
                </template>
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'vehicle.' + scope.$index + '.plate_number'"
                    :rules="{
                      required: true,
                      message: '请输入车牌号',
                      trigger: 'blur',
                    }"
                    style="margin-top: 17px"
                  >
                    <el-input v-model="scope.row.plate_number"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column property="vehicle_type" label="车型" key="2">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.vehicle_type"
                    placeholder="请选择车型"
                  >
                    <el-option
                      v-for="item in vehicle_type_type"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                  <el-input
                    style="margin: 5px 0px 0px 0px"
                    v-if="scope.row.vehicle_type == 4"
                    v-model="scope.row.vehicle_type_other"
                    placeholder="请输入车型"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                property="vehicle_length_type"
                label="车长"
                key="3"
              >
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.vehicle_length_type"
                    placeholder="请选择车长"
                  >
                    <el-option
                      v-for="item in vehicle_length_type_type"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                  <el-input
                    style="margin: 5px 0px 0px 0px"
                    v-if="scope.row.vehicle_length_type == 3"
                    placeholder="请输入车长度"
                    v-model="scope.row.vehicle_length"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                property="inventory"
                label="保有量"
                v-if="ruleForm.carrier_type == 3 || ruleForm.carrier_type == 2"
                key="4"
              >
                <template slot-scope="scope">
                  <el-input
                    placeholder="请输入保有量"
                    v-model="scope.row.inventory"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                property="has_independent_refrigeration"
                label="独立冷机"
                key="5"
              >
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.has_independent_refrigeration"
                    placeholder="请选择独立冷机"
                  >
                    <el-option
                      v-for="item in whether"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                property="is_affiliated_to_company"
                label="可挂靠我司"
                key="6"
              >
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.is_affiliated_to_company"
                    placeholder="请选择可挂靠我司"
                  >
                    <el-option
                      v-for="item in whether"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column property="is_verified" label="是否验证" key="7">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.is_verified"
                    placeholder="请选择是否验证"
                  >
                    <el-option
                      v-for="item in whether"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                property="vehicle_license"
                label="行驶证"
                key="8"
              >
                <template slot-scope="scope">
                  <UploadLink
                    :files.sync="scope.row.vehicle_license"
                  ></UploadLink>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 1冷仓 冷仓信息 -->
          <div
            v-if="coolBox1 && ruleForm.type == 0"
            style="
              height: 50%;
              background: #ffffff;
              margin: 10px 10px 10px 10px;
              padding: 20px;
              border-radius: 10px;
            "
          >
            <div class="rule_title">
              <span class="title-l"> <i class="icon_left"></i>冷仓 </span>
            </div>
            <el-table
              ref="singleTable"
              :data="coldStorage"
              border
              highlight-current-row
            >
              <el-table-column type="index" width="50">
                <template slot="header" slot-scope="scope">
                  <span @click="addShiperbox(scope, 1)" style="font-size: 20px"
                    >+</span
                  >
                </template>
                <template slot-scope="scope">
                  <div class="remodername">
                    <div class="number">{{ scope.$index + 1 }}</div>
                    <div
                      class="remodercenter el-icon-minus"
                      @click="reducebox(scope.$index)"
                    ></div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column property="thermosphere" label="冷仓温层">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.thermosphere"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="(item, index) in thermosphereData"
                      :key="index"
                      :value="item.item_code"
                      :label="item.item_name"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column property="area" label="面积">
                <template slot-scope="scope">
                  <el-input
                    placeholder="面积"
                    v-model="scope.row.area"
                    :Key="index"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column property="is_gsp" label="GSP认证">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.is_gsp"
                    placeholder="GSP认证"
                    :Key="index"
                  >
                    <el-option
                      v-for="item in whether"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column property="is_gmp" label="GMP认证">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.is_gmp"
                    placeholder="GSP认证"
                    :Key="index"
                  >
                    <el-option
                      v-for="item in whether"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column property="annex" label="附件">
                <template slot-scope="scope">
                  <UploadLink :files.sync="scope.row.annex"></UploadLink>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 2 保税仓信息 -->
          <div
            v-if="coolBox2 && ruleForm.type == 0"
            style="
              height: 50%;
              background: #ffffff;
              margin: 10px 10px 10px 10px;
              padding: 20px;
              border-radius: 10px;
            "
          >
            <div class="rule_title">
              <span class="title-l"> <i class="icon_left"></i>保税仓 </span>
            </div>
            <el-table
              ref="singleTable"
              :data="bondedWarehouse"
              border
              highlight-current-row
            >
              <el-table-column type="index" width="50">
                <template slot="header" slot-scope="scope">
                  <span @click="addShiperbox(scope, 2)" style="font-size: 20px"
                    >+</span
                  >
                </template>
                <template slot-scope="scope">
                  <div class="remodername">
                    <div class="number">{{ scope.$index + 1 }}</div>
                    <div
                      class="remodercenter el-icon-minus"
                      @click="reduceCar(scope.$index)"
                    ></div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column property="thermosphere" label="保税仓温层">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.thermosphere"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="(item, index) in thermosphereData"
                      :key="index"
                      :value="item.item_code"
                      :label="item.item_name"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column property="area" label="面积">
                <template slot-scope="scope">
                  <el-input
                    placeholder="面积"
                    v-model="scope.row.area"
                    :Key="index"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column property="is_gsp" label="GSP认证">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.is_gsp" placeholder="GSP认证">
                    <el-option
                      v-for="item in whether"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column property="is_gmp" label="GMP认证">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.is_gmp" placeholder="GSP认证">
                    <el-option
                      v-for="item in whether"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column property="annex" label="附件">
                <template slot-scope="scope">
                  <UploadLink :files.sync="scope.row.annex"></UploadLink>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 3保温箱 -->
          <div
            v-if="coolBox3 && ruleForm.type == 0"
            style="
              height: 50%;
              background: #ffffff;
              margin: 10px 10px 10px 10px;
              padding: 20px;
              border-radius: 10px;
            "
          >
            <div class="rule_title">
              <span class="title-l"> <i class="icon_left"></i>保温箱 </span>
            </div>

            <el-table
              ref="singleTable"
              :data="incubatorBox"
              border
              highlight-current-row
            >
              <el-table-column type="index" width="50">
                <template slot="header" slot-scope="scope">
                  <span @click="addShiperbox(scope, 3)" style="font-size: 20px"
                    >+</span
                  >
                </template>
                <template slot-scope="scope">
                  <div class="remodername">
                    <div class="number">{{ scope.$index + 1 }}</div>
                    <div
                      class="remodercenter el-icon-minus"
                      @click="reduceCar(scope.$index)"
                    ></div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column property="package_type" label="包装型号">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.package_type"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="(item, index) in package_typeList"
                      :key="index"
                      :value="item.item_code"
                      :label="item.item_name"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column property="is_verified" label="是否验证">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.is_verified"
                    placeholder="是否验证"
                  >
                    <el-option
                      v-for="item in whether"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column property="annex" label="附件">
                <template slot-scope="scope">
                  <UploadLink :files.sync="scope.row.annex"></UploadLink>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 4冷柜 -->
          <div
            v-if="coolBox4 && ruleForm.type == 0"
            style="
              height: 50%;
              background: #ffffff;
              margin: 10px 10px 10px 10px;
              padding: 20px;
              border-radius: 10px;
            "
          >
            <div class="rule_title">
              <span class="title-l"> <i class="icon_left"></i>冷柜 </span>
            </div>

            <el-table
              ref="singleTable"
              :data="refrigeratorBox"
              border
              highlight-current-row
            >
              <el-table-column type="index" width="50">
                <template slot="header" slot-scope="scope">
                  <span @click="addShiperbox(scope, 4)" style="font-size: 20px"
                    >+</span
                  >
                </template>
                <template slot-scope="scope">
                  <div class="remodername">
                    <div class="number">{{ scope.$index + 1 }}</div>
                    <div
                      class="remodercenter el-icon-minus"
                      @click="reduceCar(scope.$index)"
                    ></div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column property="thermosphere" label="温层">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.thermosphere"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="(item, index) in thermosphereData"
                      :key="index"
                      :value="item.item_code"
                      :label="item.item_name"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column property="area" label="容积">
                <template slot-scope="scope">
                  <el-input
                    placeholder="容积"
                    v-model="scope.row.area"
                  ></el-input>
                </template>
              </el-table-column>

              <el-table-column property="is_verified" label="是否验证">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.is_verified"
                    placeholder="是否验证"
                  >
                    <el-option
                      v-for="item in whether"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column property="annex" label="附件">
                <template slot-scope="scope">
                  <UploadLink :files.sync="scope.row.annex"></UploadLink>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div style="height: 40%; margin: 0px 10px 5% 10px; display: flex">
            <div
              style="
                width: 50%;
                padding: 20px;
                background: #ffffff;
                border-radius: 10px;
              "
            >
              <el-tabs type="border-card">
                <el-tab-pane label="计费规则">
                  <!-- 计费规则 -->
                  <div>
                    <div style="display: flex; margin-bottom: 18px">
                      <span style="margin: 4px 10px 0px 0px; font-size: 14px"
                        >计费规则</span
                      >
                      <el-select
                        v-model="ruleForm.billing_type"
                        placeholder="请选择运力类型"
                      >
                        <el-option
                          v-for="item in Accounting_rule"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </div>
                    <div
                      v-if="ruleForm.billing_type != 4"
                      style="margin-bottom: 18px"
                    >
                      <el-table
                        ref="singleTable"
                        :data="ruleForm.billing_rules"
                        border
                        highlight-current-row
                      >
                        <el-table-column type="index" width="50">
                          <template slot="header" slot-scope="scope">
                            <span
                              @click="addShiper(scope)"
                              style="font-size: 20px"
                              >+</span
                            >
                          </template>
                          <template slot-scope="scope">
                            <div class="remodername">
                              <div class="number">{{ scope.$index + 1 }}</div>
                              <div
                                class="remodercenter el-icon-minus"
                                @click="reduce(scope.$index)"
                              ></div>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column property="start" label="最小值(km)">
                          <template slot-scope="scope">
                            <el-input v-model="scope.row.start"></el-input>
                          </template>
                        </el-table-column>
                        <el-table-column property="end" label="最大值(km)">
                          <template slot-scope="scope">
                            <el-input v-model="scope.row.end"></el-input>
                          </template>
                        </el-table-column>
                        <el-table-column property="freight" label="运费(元/km)">
                          <template slot-scope="scope">
                            <el-input v-model="scope.row.freight"></el-input>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                    <div style="width: 100%">
                      <el-upload
                        id="upload_import_order_excel"
                        class="upload-demo"
                        ref="add-upload"
                        action
                        multiple
                        :auto-upload="false"
                        :file-list="ruleForm.audit_report_list"
                        :on-change="
                          (file, fileList) => {
                            handleChange(file, fileList, 30);
                          }
                        "
                        :on-remove="
                          (file, fileList) => {
                            removeChangeTWO(file, fileList, 30);
                          }
                        "
                      >
                        <el-button
                          slot="trigger"
                          type="primary"
                          size="mini"
                          icon="el-icon-upload2"
                          data-tracker="P2-18"
                          >上传价格本</el-button
                        >
                        <div slot="file" slot-scope="{ file }">
                          <li class="el-upload-list__item is-success">
                            <a
                              @click="() => openUrl(file)"
                              class="el-upload-list__item-name"
                            >
                              <i class="el-icon-document"></i>{{ file.name }}
                            </a>
                            <label class="el-upload-list__item-status-label">
                              <i
                                class="el-icon-upload-success el-icon-circle-check"
                              ></i>
                            </label>
                            <i
                              @click.stop="removeChangeTWO(file, fileList, 30)"
                              class="el-icon-close"
                              :disabled="disabledType"
                            ></i>
                          </li>
                        </div>
                      </el-upload>
                    </div>
                  </div>
                </el-tab-pane>
                <!-- 常跑路线 -->
                <el-tab-pane label="常跑路线">
                  <!-- 长跑路线-->
                  <div>
                    <el-table
                      ref="singleTable"
                      :data="ruleForm.routerType"
                      border
                      highlight-current-row
                    >
                      <el-table-column type="index" width="50">
                        <template slot="header" slot-scope="scope">
                          <span
                            @click="addShiperRouter(scope)"
                            style="font-size: 20px"
                            >+</span
                          >
                        </template>
                        <template slot-scope="scope">
                          <div class="remodername">
                            <div class="number">{{ scope.$index + 1 }}</div>
                            <div
                              class="remodercenter el-icon-minus"
                              @click="reduceRouter(scope.$index)"
                            ></div>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column property="start" label="始发地">
                        <template slot-scope="scope">
                          <el-cascader
                            v-model="scope.row.commence"
                            ref="editCascader"
                            :filterable="false"
                            :clearable="false"
                            placeholder=""
                            :options="addresssequence"
                            :props="{
                              value: 'id',
                              label: 'name',
                              children: 'next_level_data',

                              checkStrictly: true,
                            }"
                          ></el-cascader>
                        </template>
                      </el-table-column>
                      <el-table-column property="destination" label="目的地">
                        <template slot-scope="scope">
                          <el-cascader
                            v-model="scope.row.destination"
                            ref="editCascader"
                            placeholder=""
                            :options="addresssequence"
                            clearable
                            filterable
                            :props="{
                              value: 'id',
                              label: 'name',
                              children: 'next_level_data',

                              checkStrictly: true,
                            }"
                          ></el-cascader>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
            <div
              style="
                width: 50%;
                padding: 20px;
                margin-left: 10px;
                background: #ffffff;
                border-radius: 10px;
              "
            >
              <div style="margin-bottom: 22px">
                <div style="font-size: 14x; margin-bottom: 18px">
                  <span style="font-size: 14px">标签</span>
                </div>
                <div>
                  <el-tag
                    :key="index"
                    v-for="(tag, index) in dynamicTagsdata"
                    closable
                    type="danger"
                    :disable-transitions="false"
                    @close="handleClose(index)"
                    style="
                      height: 32px;
                      line-height: 30px;
                      padding: 0px 10px 0px 10px;
                      margin: 4px;
                    "
                  >
                    {{ tag }}
                  </el-tag>
                  <el-select
                    style="width: 115px"
                    ref="select"
                    v-model="inputValue"
                    v-if="inputVisible"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请添加标签"
                    :remote-method="remoteMethod"
                    @keyup.enter.native="handleInputConfirm"
                    @change="changeName"
                    size="small"
                  >
                    <el-option
                      v-for="item in Label_type"
                      :key="item.id"
                      :label="item.label_name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </div>
              </div>
            </div>
          </div>
        </el-form>
        <div class="footer">
          <div style="margin-bottom: 4px">
            <el-button @click="countermand()">取 消</el-button>
            <el-button
              type="primary"
              @click="determine('ruleForm')"
              v-if="pooltype == 0 && poolTypeobj == false"
              >保存</el-button
            >
            <el-button
              type="primary"
              @click="copyreader('ruleForm')"
              v-if="pooltype == 1 && poolTypeobj == false"
              >保存</el-button
            >
          </div>
        </div>
      </el-drawer>
    </div>
  </div>
</template>
<script>
import { regionList } from "@/page/material/common/common";
import UploadLink from "@/components/uploadFile/uploadLink.vue";
// import { reqDictionaryOptions } from "@/api/earlywarning";
import { dictionaryBatch } from "@/api/waybill";
import {
  Transport_capacity,
  Label_list,
  Label_create,
  transport_capacity_list,
  transport_capacity_Detail,
  transport_capacity_update,
  transport_capacity_delete,
  transport_capacity_export,
  transport_capacity_import,
} from "@/api/transportationtools";
import TableHeader from "@/page/orderform/components/TableHeader/tableheader.vue";
import SettinUp from "@/page/orderform/components/settingUp/settingUp.vue";
import { uploading } from "@/page/material/common/common";
import ImpoterData from "@/page/toolmanagement/components/impoterdata.vue";
export default {
  name: "transportpool",
  components: { TableHeader, SettinUp, ImpoterData, UploadLink },
  data() {
    return {
      currentPage4: 1,
      currentpage_size: 20,
      titlename: "运力",
      operation_type: "1",
      ruletype: "",
      reqTrue: true,
      ruleForm: {
        type: "0",
        province_id: "",
        city_id: "",
        district_id: "",
        carrier_type: "", //承运商类型 1个体司机 2承运商
        name: "", //
        phone: "", //
        tax_included_point: "", // 含票税点 0 6% 1 9% 2不含票
        station_airport_port_name: "", // 车站/机场/港口名称
        is_forwarder: "0", // 是否货代 0否 1是
        forwarder_name: "", // 货代名称
        is_primary_agent: "0", // 是否一级代理 0否 1是
        primary_agent_certification: [], // 一级代理资质证明
        label: [], // 标签
        billing_type: "", // 计费类型 0按公里计费 1按重量计费 2按体积计费 3其它
        billing_rules: [
          // {
          //     id: "0",
          //     start: "",
          //     end: "",
          //     freight: "",
          //     appendix: ""
          // },
        ], // 计费规则列表
        address: [], //地址
        audit_report: [], //文件上传的资质
        audit_report_list: [], //计费规则文件上传
        // ======================
        carrier_link: [], //承运环节
        driver_license: [], // 驾驶证
        property: [], //资产  2保税仓 3保温箱 4冷柜
        is_dangerous_aptitude: "", //是否有危险品操作资质
        vehicle: [
          {
            id: "",
            plate_number: "", //车牌号
            vehicle_type: "", //车型 1冷藏车 2厢式车（非冷藏车）3集装箱 4其它
            vehicle_type_other: "", //车型  为其它时输入
            vehicle_length_type: "", //车长 1 4.2m, 2 7.6m, 3 其他
            vehicle_length: "", // 车长
            is_verified: "", //是否验证 0否 1是
            has_independent_refrigeration: "", //是否独立冷机 0否 1是
            is_affiliated_to_company: "", // 是否挂靠我司 0否 1是
            inventory: "", //保有量
            vehicle_license: [], // 行驶证
          },
        ], //车辆信息
        // 路由
        routerType: [
          {
            id: "",
            commence: [], //始发地
            destination: [], //目的地
          },
        ],
        // 承运能力
        carrier_ability: [], //1医药冷链 2生鲜冷链 3常温冷链
        clinic: [], //1临床 2临检
        property: [], // 1冷仓 2保税仓 3保温箱 4冷柜
        is_dangerous_aptitude: "", //是否有危险品操作资质 0否 1是
        refrigerate: [], //1冷仓 2保税仓 3保温箱 4冷柜
      },
      rules: {
        type: [{ required: true, message: "请选择运力类型", trigger: "blur" }],
        address: [{ required: true, message: "请选择所属地", trigger: "blur" }],
        carrier_type: [
          { required: true, message: "请选择承运商类型", trigger: "blur" },
        ],
        has_refrigerated_vehicle: [
          { required: true, message: "是否冷藏车", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入名字", trigger: "blur" }],
        phone: [
          // { required: false, message: '请输入联系方式', trigger: 'blur' },
        ],
        station_airport_port_name: [
          {
            required: true,
            message: "请输入车站/机场/港口名称",
            trigger: "blur",
          },
        ],

        is_forwarder: [
          { required: true, message: "请选择所属地", trigger: "blur" },
        ],
        audit_report: [
          { required: true, message: "请上传文件", trigger: "blur" },
        ],
        forwarder_name: [
          { required: true, message: "请输入货代名称", trigger: "blur" },
        ],
      },
      dialogVisible: false,
      propertyType: [
        {
          value: "1",
          label: "冷仓",
        },
        {
          value: "2",
          label: "保税仓",
        },
        {
          value: "3",
          label: "保温箱",
        },
        {
          value: "4",
          label: "冷柜",
        },
      ],
      transport_type: [
        {
          value: "0",
          label: "汽运",
        },
        {
          value: "1",
          label: "高铁",
        },
        {
          value: "2",
          label: "铁路",
        },
        {
          value: "3",
          label: "航空",
        },
        {
          value: "4",
          label: "海运",
        },
      ],
      carrier_type_type: [
        {
          value: "1",
          label: "个体司机",
        },
        {
          value: "2",
          label: "车队",
        },
        {
          value: "3",
          label: "物流公司",
        },
      ],
      vehicle_type_type: [
        {
          value: "1",
          label: "冷藏车",
        },
        {
          value: "2",
          label: "厢式车(非冷藏车)",
        },
        {
          value: "3",
          label: "集装箱",
        },
        {
          value: "4",
          label: "其它",
        },
      ],
      vehicle_length_type_type: [
        {
          value: "1",
          label: "4.2m",
        },
        {
          value: "2",
          label: "7.6m",
        },
        {
          value: "3",
          label: "其他",
        },
      ],
      taxpoint: [
        {
          value: "1",
          label: "6%",
        },
        {
          value: "2",
          label: "9%",
        },
        {
          value: "3",
          label: "不含票",
        },
      ],
      Accounting_rule: [
        {
          value: "1",
          label: "按公里计费",
        },
        {
          value: "2",
          label: "按重量计费",
        },
        {
          value: "3",
          label: "按体积计费",
        },
        {
          value: "4",
          label: "其他",
        },
      ],
      whether: [
        {
          value: "0",
          label: "否",
        },
        {
          value: "1",
          label: "是",
        },
      ],
      carrier_ability_type: [
        {
          value: "1",
          label: "医药冷链",
        },
        {
          value: "2",
          label: "生鲜冷链",
        },
        {
          value: "3",
          label: "常温",
        },
      ],
      // 地址库
      addresssequence: [],
      dynamicTags: [],
      dynamicTagsdata: [],
      inputVisible: true,
      inputValue: "",
      Label_type: [], //标签列表
      Label_type_list: [], //所有标签
      header_data_list: [],
      propMap: {},
      obj_list: {},
      HeaderData: [],
      totalPage: 0,
      page: 1,
      page_size: 20,
      waybillIdNums: [],
      pooltype: "0",
      drawerfalse: false,
      moduleObj: {
        Downurl:
          "https://dus-company-log-img.oss-cn-beijing.aliyuncs.com/0/1684118807607%E8%BF%90%E5%8A%9B%E5%AF%BC%E5%85%A5%E6%96%87%E4%BB%B6.xlsx",
        title: "运力导入流程操作",
        toLead_result: "",
      },
      // 用来记录是那个的导入的字段
      sheetType: "",
      // 运力状态
      poolTypeobj: false,
      //1.冷仓
      coldStorage: [
        {
          id: "",
          type: "1", //类型
          package_type: "", // 包装型号
          thermosphere: "", //温层
          area: "", //面积
          is_gsp: "", //GSP认证
          is_gmp: "", //GMP 认证
          annex: [], //上传的文件
          is_verified: "", //是否验证
        },
      ],
      // 2.保税仓
      bondedWarehouse: [
        {
          id: "", //id
          type: "2", //类型
          package_type: "", // 包装型号
          thermosphere: "", //温层
          area: "", //面积
          is_gsp: "", //GSP认证
          is_gmp: "", //GMP 认证
          annex: [], //上传的文件
          is_verified: "", //是否验证
        },
      ],
      // 3.保温箱
      incubatorBox: [
        {
          id: "", //id
          type: "3", //类型
          package_type: "", // 包装型号
          thermosphere: "", //温层
          area: "", //面积
          is_gsp: "", //GSP认证
          is_gmp: "", //GMP 认证
          annex: [], //上传的文件
          is_verified: "", //是否验证
        },
      ],
      // 4 冷柜
      refrigeratorBox: [
        {
          id: "", //id
          type: "4", //类型
          package_type: "", // 包装型号
          thermosphere: "", //温层
          area: "", //面积
          is_gsp: "", //GSP认证
          is_gmp: "", //GMP 认证
          annex: [], //上传的文件
          is_verified: "", //是否验证
        },
      ],
      //判断冷仓 保税仓 保温箱 冷柜的显示隐藏
      coolBox1: false,
      coolBox2: false,
      coolBox3: false,
      coolBox4: false,
      // 温层
      thermosphereData: [],
      // 包装型号
      package_typeList: [],
      // 第一级禁止选择
      disableSecondLevel: true,
      overviewdata: {
        transport_capacity_number: 0, //运力数
        trucks_number: 0, // 货车数
        refrigerated_trucks_number: 0, // 冷藏车数
      },
    };
  },
  mounted() {
    this.provincectiy();
    this.remoteMethodPage();
    this.CapacityList();
    this.thermosphereClickFn();
  },
  watch: {
    // 此处监听variable变量，当期有变化时执行
    "ruleForm.type": {
      handler(val, olVal) {
        this.motionType(val);
      },
      deep: true,
    },
    "ruleForm.carrier_type": {
      handler(val, olVal) {
        this.carrierType(val);
      },
      deep: true,
    },
    "ruleForm.vehicle": {
      handler(val, olVal) {
        const hasVehicleTypeZero = this.ruleForm.vehicle.some(
          (obj) => obj.vehicle_type == "1"
        );

        this.reqTrue = !hasVehicleTypeZero;
      },
      deep: true,
    },
    "ruleForm.property": {
      handler(val, olVal) {
        this.coolBox1 = this.ruleForm.property.some((obj) => obj == 1);
        this.coolBox2 = this.ruleForm.property.some((obj) => obj == 2);
        this.coolBox3 = this.ruleForm.property.some((obj) => obj == 3);
        this.coolBox4 = this.ruleForm.property.some((obj) => obj == 4);
      },
      deep: true,
    },
  },

  methods: {
    async thermosphereClickFn() {
      let result1 = await dictionaryBatch({
        codes: ["thermosphere", "Package_model"],
      });
      this.thermosphereData = result1.data.list.thermosphere;
      this.package_typeList = result1.data.list.Package_model;
    },
    objSettinUp() {
      this.CapacityList();
    },
    // 编辑
    copyreader(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var routreTypeNull = this.checkCommenceDestination(
            this.ruleForm.routerType
          );
          var routerType = [];
          if (routreTypeNull == true) {
            routerType = this.RouterTypeObj();
          } else {
            routerType = [];
          }
          var vehicleData = this.vehicleObj();
          // var routerType = this.RouterTypeObj()
          var param = {
            id: this.waybillIdNums[0] + "",
            ...this.ruleForm,
            province_id: this.ruleForm.address[0] + "",
            city_id:
              this.ruleForm.address[1] != ""
                ? this.ruleForm.address[1] + ""
                : "",
            district_id:
              this.ruleForm.address[2] != ""
                ? this.ruleForm.address[2] + ""
                : "",
            primary_agent_certification: this.ruleForm.audit_report,
            label_ids: this.dynamicTags.map(Number),
            billing_rules:
              this.ruleForm.billing_type != 3
                ? this.ruleForm.billing_rules
                : [],
            billing_other: this.ruleForm.audit_report_list,
            route: routerType,
            driver_license: this.ruleForm.driver_license[0],
            vehicle: vehicleData,
            refrigerate: [
              ...this.coldStorage,
              ...this.bondedWarehouse,
              ...this.incubatorBox,
              ...this.refrigeratorBox,
            ],
          };
          delete param.address;
          delete param.audit_report;
          delete param.audit_report_list;
          transport_capacity_update(param).then((res) => {
            if (res.code == "10000") {
              this.$message({
                showClose: true,
                message: "修改成功",
                type: "success",
              });
              this.countermand();
              this.CapacityList();
            }
          });
        } else {
          return false;
        }
      });
    },
    // 运力列表
    CapacityList() {
      var param = {
        header_id: "17",
        page: this.page,
        page_size: this.page_size,
        ...this.obj_list,
      };
      transport_capacity_list(param).then((res) => {
        this.orders_list = res.data.data == null ? [] : res.data.data;
        this.orders_list.unshift({});
        this.header_data_list = this.orders_list;
        this.HeaderData = res.data.item_list;
        this.Fntransformation(this.HeaderData);
        this.totalPage = res.data.pagination.total;
        // 运力池统计的数据
        this.overviewdata = res.data.overview;
      });
    },
    // 隐射函数
    Fntransformation(obj) {
      const result = {};
      for (const prop in obj) {
        if (obj.hasOwnProperty(prop)) {
          if (obj[prop].send_name !== "") {
            result[obj[prop].name] = obj[prop].show_name;
          } else {
            result[obj[prop].name] = obj[prop].name;
          }
        }
      }
      this.propMap = result;
    },
    objheader(obj) {
      var data = {
        header_id: 17 + "",
        page: this.page,
        page_size: this.page_size,
        ...obj,
      };
      this.obj_list = obj;
      transport_capacity_list(data).then((res) => {
        this.header_data_list = res.data.data;
        if (res.code === 10000 && res.data.data !== null) {
          this.header_data_list.unshift({});
          this.totalPage = res.data.pagination.total;
          // 运力池统计的数据
          this.overviewdata = res.data.overview;
          this.page = res.data.pagination.page;
          this.page_size = res.data.pagination.page_size;
        } else {
          this.header_data_list = [{}];
          this.paginations.total = 0;
          this.orderslength = 0;
        }
      });
    },
    handleDelete(index, id, type) {
      this.handleJumpDetail(id);
    },
    handleDeleteType(value) {
      this.waybillIdNums = value;
    },
    // 所属地
    provincectiy() {
      regionList(0).then((res) => {
        this.addresssequence = res.data;
      });
    },
    // 计费规则的
    addShiper(scope) {
      this.ruleForm.billing_rules.push({
        id: "",
        start: "0",
        end: "0",
        freight: "0",
        appendix: "",
      });
    },
    reduce(index) {
      // if (this.ruleForm.billing_rules.length > 1) {
      //     this.ruleForm.billing_rules.splice(index, 1);
      // } else {
      //     this.$message({
      //         message: "这是最后一条数据",
      //         type: "warning",
      //     });
      // }
      this.ruleForm.billing_rules.splice(index, 1);
    },
    // 车辆信息
    addShiperCar(scope) {
      this.ruleForm.vehicle.push({
        id: "",
        plate_number: "", //车牌号 plate_number
        vehicle_type: "", //车型 1冷藏车 2厢式车（非冷藏车）3集装箱 4其它
        vehicle_type_other: "", //车型  为其它时输入
        vehicle_length_type: "", //车长 1 4.2m, 2 7.6m, 3 其他
        vehicle_length: "", // 车长

        is_verified: "", //是否验证 0否 1是
        has_independent_refrigeration: "", //是否独立冷机 0否 1是
        is_affiliated_to_company: "", // 是否挂靠我司 0否 1是
        inventory: "", //保有量
        vehicle_license: [], // 行驶证
      });
    },
    reduceCar(index) {
      if (this.ruleForm.vehicle.length > 1) {
        this.ruleForm.vehicle.splice(index, 1);
      } else {
        this.$message({
          message: "这是最后一条数据",
          type: "warning",
        });
      }
    },

    addShiperbox(scope, type) {
      if (type == 1) {
        this.coldStorage.push({
          id: "", //id
          type: "1", //类型
          package_type: "", // 包装型号
          thermosphere: "", //温层
          area: "", //面积
          is_gsp: "", //GSP认证
          is_gmp: "", //GMP 认证
          annex: [], //上传的文件
          is_verified: "", //是否验证
        });
      } else if (type == 2) {
        this.bondedWarehouse.push({
          id: "", //id
          type: "2", //类型
          package_type: "", // 包装型号
          thermosphere: "", //温层
          area: "", //面积
          is_gsp: "", //GSP认证
          is_gmp: "", //GMP 认证
          annex: [], //上传的文件
          is_verified: "", //是否验证
        });
      } else if (type == 3) {
        this.incubatorBox.push({
          id: "", //id
          type: "3", //类型
          package_type: "", // 包装型号
          thermosphere: "", //温层
          area: "", //面积
          is_gsp: "", //GSP认证
          is_gmp: "", //GMP 认证
          annex: [], //上传的文件
          is_verified: "", //是否验证
        });
      } else if (type == 4) {
        this.refrigeratorBox.push({
          id: "", //id
          type: "4", //类型
          package_type: "", // 包装型号
          thermosphere: "", //温层
          area: "", //面积
          is_gsp: "", //GSP认证
          is_gmp: "", //GMP 认证
          annex: [], //上传的文件
          is_verified: "", //是否验证
        });
      }
    },
    // 长跑路线
    addShiperRouter() {
      this.ruleForm.routerType.push({
        commence: [], //始发地
        destination: [], //目的地
      });
    },
    reduceRouter() {
      if (this.ruleForm.routerType.length > 1) {
        this.ruleForm.routerType.splice(index, 1);
      } else {
        this.$message({
          message: "这是最后一条数据",
          type: "warning",
        });
      }
    },
    creation() {
      this.dialogVisible = true;
      this.pooltype = 0;
      this.titlename = "新增运力";
      this.poolTypeobj = false;
      this.motionType(0);
    },
    // 创建页面
    determine(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var routreTypeNull = this.checkCommenceDestination(
            this.ruleForm.routerType
          );

          var routerType = [];
          if (routreTypeNull == true) {
            routerType = this.RouterTypeObj();
          } else {
            routerType = [];
          }

          var vehicleData = this.vehicleObj();
          var param = {
            ...this.ruleForm,
            province_id: this.ruleForm.address[0] + "",
            city_id:
              this.ruleForm.address[1] != ""
                ? this.ruleForm.address[1] + ""
                : "",
            district_id:
              this.ruleForm.address[2] != ""
                ? this.ruleForm.address[2] + ""
                : "",
            primary_agent_certification: this.ruleForm.audit_report,
            label_ids: this.dynamicTags.map(Number),
            billing_rules:
              this.ruleForm.billing_type != 3
                ? this.ruleForm.billing_rules
                : [],
            billing_other: this.ruleForm.audit_report_list,
            route: routerType,
            driver_license: this.ruleForm.driver_license[0],
            vehicle: vehicleData,
            refrigerate: [
              ...this.coldStorage,
              ...this.bondedWarehouse,
              ...this.incubatorBox,
              ...this.refrigeratorBox,
            ],
          };
          // 给后台传递参数的时候删除这些数据
          delete param.address;
          delete param.audit_report;
          delete param.audit_report_list;
          Transport_capacity(param).then((res) => {
            if (res.code == "10000") {
              this.$message({
                showClose: true,
                message: "创建成功",
                type: "success",
              });
              this.countermand();
              this.CapacityList();
            }
          });
        } else {
          return false;
        }
      });
    },
    handleSizeChange(val) {
      this.page_size = val;
      this.CapacityList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.CapacityList();
    },
    handleClose(index) {
      this.dynamicTagsdata.splice(index, 1);
      this.dynamicTags.splice(index, 1);
    },

    handleInputConfirm(value) {
      var matchedTab = [];
      if (this.Label_type.length > 0) {
        for (let i = 0; i < this.Label_type.length; i++) {
          if (this.Label_type[i].label_name === value) {
            matchedTab = this.Label_type[i];
          }
        }
      }
      if (matchedTab.length == 0) {
        this.$refs.select.query = "";
        this.$nextTick(() => {
          const input = this.$refs.select.$el.querySelector(".el-input__inner");
          input.value = "";
        });
        var param = {
          label_name: value.srcElement.value,
        };
        Label_create(param).then((res) => {
          if (res.code == "10000") {
            if (res.data != "") {
              this.remoteMethodPage();
              this.dynamicTags.push(res.data.id);
            }
          } else {
            this.Label_type = [];
          }
        });
      } else {
        this.$refs.select.query = "";
        this.$nextTick(() => {
          const input = this.$refs.select.$el.querySelector(".el-input__inner");
          input.value = "";
        });
        this.remoteMethodPage();
        this.dynamicTags.push(matchedTab[0].id);
        this.Label_type = [];
      }
    },
    // 上传文件
    handleChange(file, fileList, type) {
      this.fileList = fileList;
      var filelist = file.raw; //文件
      var filename = file.raw.uid + file.raw.name; //通过 uid和name组成文件的名字
      uploading(filelist, filename, type).then((res) => {
        if (type == 24) {
          this.ruleForm.audit_report.push({
            uid: file.uid,
            url: res.res.requestUrls[0],
            name: res.name,
          });
        } else if (type == 30) {
          this.ruleForm.audit_report_list.push({
            uid: file.uid,
            url: res.res.requestUrls[0],
            name: res.name,
          });
        }
      });
    },
    removeChange(file) {
      const index = this.ruleForm.audit_report.findIndex(
        (item) => item.uid === file.uid
      );
      index > -1 && this.ruleForm.audit_report.splice(index, 1);
    },
    removeChangeTWO(file) {
      // console.log(file, "fasdkfjllkj");
      const index = this.ruleForm.audit_report_list.findIndex(
        (item) => item.uid === file.uid
      );
      index > -1 && this.ruleForm.audit_report_list.splice(index, 1);
    },
    openUrl(file) {
      window.open(file.url);
    },
    // 通过搜索获取标签
    remoteMethod(value) {
      var param = {
        label_name: value,
      };
      Label_list(param).then((res) => {
        this.Label_type = res.data;
      });
    },
    // 直接获取标签
    async remoteMethodPage() {
      var param = {};
      const response = await Label_list(param);
      this.Label_type_list = response.data;
      this.ObjTablist();
    },
    ObjTablist() {
      const matchedLabelNames = this.dynamicTags
        .map((id) => {
          const matchedObject = this.Label_type_list.find(
            (obj) => obj.id === id
          );
          return matchedObject ? matchedObject.label_name : null;
        })
        .filter((labelName) => labelName !== null);
      this.dynamicTagsdata = matchedLabelNames;
    },
    changeName(value) {
      this.dynamicTags.push(value);
      this.remoteMethodPage();
      this.inputValue = "";
      this.Label_type = [];
    },
    // 详情数据接口
    redact(id) {
      var param = {
        id: id + "",
      };
      transport_capacity_Detail(param).then((res) => {
        this.dialogVisible = true;
        this.pooltype = 1;
        this.titlename = "编辑运力";
        this.ruleForm = {
          ...res.data,
        };
        var routerData = this.ConvertArrayRouter(res.data.route);
        var refrigerLsit = this.refrigerateData(res.data.refrigerate || []);
        this.EachContent(refrigerLsit || []);
        if (
          res.data.province_id != 0 &&
          res.data.city_id != 0 &&
          res.data.district_id != 0
        ) {
          this.ruleForm.address = [
            res.data.province_id * 1,
            res.data.city_id * 1,
            res.data.district_id * 1,
          ];
        } else if (res.data.province_id != 0 && res.data.city_id != 0) {
          this.ruleForm.address = [
            res.data.province_id * 1,
            res.data.city_id * 1,
          ];
        } else if (res.data.province_id != 0) {
          this.ruleForm.address = [res.data.province_id * 1];
        }
        this.ruleForm.tax_included_point =
          res.data.tax_included_point == "0" ? "" : res.data.tax_included_point;
        this.ruleForm.audit_report = res.data.primary_agent_certification;
        this.ruleForm.billing_type =
          res.data.billing_type == 0 ? " " : this.ruleForm.billing_type;
        this.ruleForm.audit_report_list = res.data.billing_other;
        this.ruletype = res.data.type;
        this.ruleForm.driver_license = [res.data.driver_license];
        this.ruleForm.routerType = routerData;
        this.ruleForm.vehicle = this.vehicleObjData(res.data.vehicle || []);
        var extracLsit = this.extractIds(res.data.label);
        this.dynamicTags = extracLsit;
        this.remoteMethodPage();
      });
    },
    convertArrayToObjects(arr) {
      let result = [];
      for (let i = 0; i < arr.length; i++) {
        let obj = {
          name: arr[i],
          url: arr[i],
        };
        result.push(obj);
      }
      return result;
    },
    extractIds(data) {
      const ids = [];
      for (const item of data) {
        if (item.hasOwnProperty("id")) {
          ids.push(item.id);
        }
      }
      return ids;
    },
    deletedata() {
      var param = {
        ids: this.waybillIdNums,
      };
      transport_capacity_delete(param).then((res) => {
        if (res.code == "10000") {
          this.$message({
            showClose: true,
            message: "删除数据成功",
            type: "success",
          });
          this.CapacityList();
        }
      });
    },
    resultClickFn() {
      this.$refs.TableHeaderList.childMethod();
      this.page_size = 20;
      this.page = 1;
      this.CapacityList();
    },
    vehicleObj() {
      this.ruleForm.vehicle.forEach((item) => {
        // console.log(item, "jfalksjdl");
        if (item.vehicle_type === "1") {
          item.vehicle_type_other = "冷藏车";
        } else if (item.vehicle_type === "2") {
          item.vehicle_type_other = "厢式车(非冷藏车)";
        } else if (item.vehicle_type === "3") {
          item.vehicle_type_other = "集装箱";
        } else {
          item.vehicle_type_other = item.vehicle_type_other;
        }
        if (item.vehicle_length_type === "1") {
          item.vehicle_length = "4.2m";
        } else if (item.vehicle_length_type === "2") {
          item.vehicle_length = "7.6m";
        } else {
          item.vehicle_length = item.vehicle_length;
        }
      });
      return this.ruleForm.vehicle;
    },
    countermand() {
      this.dynamicTags = [];
      this.dynamicTagsdata = [];
      Object.assign(this.$data.ruleForm, this.$options.data().ruleForm);
      this.dialogVisible = false;
    },
    // 导出
    exportFile() {
      var param = {
        header_id: "17",
        ids: this.waybillIdNums,
        ...this.obj_list,
      };
      transport_capacity_export(param).then((res) => {
        if (res.code === 10000) {
          this.reqUrl = "https://" + res.data.loaded_url;
          window.open(this.reqUrl);
          this.loadingfalse = false;
        }
      });
    },
    // 导入
    dropdown(val) {
      if (val == 1) {
        this.moduleObj.title = "汽运(个体司机)导入流程操作";
        this.moduleObj.toLead_result = "";
      } else if (val == 2) {
        this.moduleObj.title = "汽运(承运商)导入流程操作";
        this.moduleObj.toLead_result = "";
      } else if (val == 3) {
        this.moduleObj.title = "非汽运导入流程操作";
        this.moduleObj.toLead_result = "";
      }
      this.drawerfalse = true;
      this.sheetType = val;
    },
    // 关闭导入
    closeimport(val) {
      this.drawerfalse = val;
    },
    submitimport(val) {
      var param = {
        file_name: val,
        header_id: "17",
        sheet_id: this.sheetType,
      };
      transport_capacity_import(param).then((res) => {
        if (res.code == "10000") {
          this.moduleObj.toLead_result = res.data.res;
        }
      });
    },
    handleClickDetail_second(val) {
      this.redact(val.id);
      this.poolTypeobj = true;
    },
    handleClickEdit_second(val) {
      this.redact(val.id);
      this.poolTypeobj = false;
    },
    // 转化成省市区
    RouterTypeObj() {
      if (this.ruleForm.routerType.length > 0) {
        let result = this.ruleForm.routerType.map(function (item) {
          if (item)
            return {
              from_province_id:
                item.commence[0] != undefined
                  ? item.commence[0].toString()
                  : "",
              from_city_id:
                item.commence[1] != undefined
                  ? item.commence[1].toString()
                  : "",
              from_district_id:
                item.commence[2] != undefined
                  ? item.commence[2].toString()
                  : "",
              // ============
              to_province_id:
                item.destination[0] != undefined
                  ? item.destination[0].toString()
                  : "",
              to_city_id:
                item.destination[1] != undefined
                  ? item.destination[1].toString()
                  : "",
              to_district_id:
                item.destination[2] != undefined
                  ? item.destination[2].toString()
                  : " ",
            };
        });

        return result;
      }
    },
    checkCommenceDestination(arr) {
      for (let i = 0; i < arr.length; i++) {
        const item = arr[i];
        if (item.commence.length > 0 || item.destination.length > 0) {
          return true; // 如果 commence 或 destination 至少有一个有值，返回 true
        }
      }
      return false; // 如果所有对象的 commence 和 destination 都没有值，返回 false
    },
    // 将省市区的转化成数组模式
    ConvertArrayRouter(val) {
      // console.log(val, "valvalval");
      let result = val.map(function (item) {
        // console.log(item);
        var commenceList = [];
        if (
          item.from_province_id != 0 &&
          item.from_city_id != 0 &&
          item.from_district_id != 0
        ) {
          commenceList = [
            item.from_province_id * 1,
            item.from_city_id * 1,
            item.from_district_id * 1,
          ];
        } else if (item.from_province_id != 0 && item.from_city_id != 0) {
          commenceList = [item.from_province_id * 1, item.from_city_id * 1];
        } else if (item.from_province_id != 0) {
          commenceList = [item.from_province_id * 1];
        }
        var destinationList = [];
        if (
          item.to_province_id != 0 &&
          item.to_city_id != 0 &&
          item.to_district_id != 0
        ) {
          destinationList = [
            item.to_province_id * 1,
            item.to_city_id * 1,
            item.to_district_id * 1,
          ];
        } else if (item.to_province_id != 0 && item.to_city_id != 0) {
          destinationList = [item.to_province_id * 1, item.to_city_id * 1];
        } else if (item.to_province_id != 0) {
          destinationList = [item.to_province_id * 1];
        }
        return {
          id: item.id,
          commence: commenceList, //始发地
          destination: destinationList, //目的地
        };
      });
      return result;
    },
    motionType(val) {
      if (val == 0) {
        if (this.pooltype == 0) {
          this.ruleForm.carrier_type = "1";
        } else {
        }
        this.ruleForm.forwarder_name = "";
        this.ruleForm.station_airport_port_name = "";
        this.ruleForm.audit_report = [];
        this.ruleForm.primary_agent_certification = [];
      } else if (val == 3) {
        this.ruleForm.carrier_type = "";
        this.ruleForm.vehicle = [];
        this.ruleForm.carrier_type = "";
      } else {
        this.ruleForm.carrier_type = "";
        this.ruleForm.vehicle = [];
        this.ruleForm.carrier_type = "";
        this.ruleForm.audit_report = [];
        this.ruleForm.primary_agent_certification = [];
      }
    },
    carrierType(val) {
      this.ruleForm.carrier_type == val;
      // console.log(this.ruleForm);
      if (val == 1) {
        this.coldStorage = [
          {
            id: "",
            type: "1", //类型
            package_type: "", // 包装型号
            thermosphere: "", //温层
            area: "", //面积
            is_gsp: "", //GSP认证
            is_gmp: "", //GMP 认证
            annex: [], //上传的文件
            is_verified: "", //是否验证
          },
        ];
        this.bondedWarehouse = [
          {
            id: "", //id
            type: "2", //类型
            package_type: "", // 包装型号
            thermosphere: "", //温层
            area: "", //面积
            is_gsp: "", //GSP认证
            is_gmp: "", //GMP 认证
            annex: [], //上传的文件
            is_verified: "", //是否验证
          },
        ];
        this.incubatorBox = [
          {
            id: "", //id
            type: "3", //类型
            package_type: "", // 包装型号
            thermosphere: "", //温层
            area: "", //面积
            is_gsp: "", //GSP认证
            is_gmp: "", //GMP 认证
            annex: [], //上传的文件
            is_verified: "", //是否验证
          },
        ];
        this.refrigeratorBox = [
          {
            id: "", //id
            type: "4", //类型
            package_type: "", // 包装型号
            thermosphere: "", //温层
            area: "", //面积
            is_gsp: "", //GSP认证
            is_gmp: "", //GMP 认证
            annex: [], //上传的文件
            is_verified: "", //是否验证
          },
        ];
        this.ruleForm.property = [];
      } else if (val == 2) {
        this.coldStorage = [
          {
            id: "",
            type: "1", //类型
            package_type: "", // 包装型号
            thermosphere: "", //温层
            area: "", //面积
            is_gsp: "", //GSP认证
            is_gmp: "", //GMP 认证
            annex: [], //上传的文件
            is_verified: "", //是否验证
          },
        ];
        this.bondedWarehouse = [
          {
            id: "", //id
            type: "2", //类型
            package_type: "", // 包装型号
            thermosphere: "", //温层
            area: "", //面积
            is_gsp: "", //GSP认证
            is_gmp: "", //GMP 认证
            annex: [], //上传的文件
            is_verified: "", //是否验证
          },
        ];
        this.incubatorBox = [
          {
            id: "", //id
            type: "3", //类型
            package_type: "", // 包装型号
            thermosphere: "", //温层
            area: "", //面积
            is_gsp: "", //GSP认证
            is_gmp: "", //GMP 认证
            annex: [], //上传的文件
            is_verified: "", //是否验证
          },
        ];
        this.refrigeratorBox = [
          {
            id: "", //id
            type: "4", //类型
            package_type: "", // 包装型号
            thermosphere: "", //温层
            area: "", //面积
            is_gsp: "", //GSP认证
            is_gmp: "", //GMP 认证
            annex: [], //上传的文件
            is_verified: "", //是否验证
          },
        ];
        this.ruleForm.property = [];
      }
    },
    refrigerateData(data) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].thermosphere === "0") {
          data[i].thermosphere = "";
        }
        if (data[i].package_type === "0") {
          data[i].package_type = "";
        }
      }
      return data;
    },
    EachContent(val) {
      var coldStorageList1 = [];
      var coldStorageList2 = [];
      var coldStorageList3 = [];
      var coldStorageList4 = [];
      val.forEach((item) => {
        if (item.type === "1") {
          coldStorageList1.push(item);
        } else if (item.type === "2") {
          coldStorageList2.push(item);
        } else if (item.type === "3") {
          coldStorageList3.push(item);
        } else if (item.type === "4") {
          coldStorageList4.push(item);
        }
      });
      this.coldStorage = coldStorageList1;
      this.bondedWarehouse = coldStorageList2;
      this.incubatorBox = coldStorageList3;
      this.refrigeratorBox = coldStorageList4;
    },
    vehicleObjData(data) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].vehicle_type === "0") {
          data[i].vehicle_type = "";
        }
        if (data[i].vehicle_length_type === "0") {
          data[i].vehicle_length_type = "";
        }
      }
      return data;
    },
  },
};
</script>
<style lang="less" scoped>
::v-deep .el-drawer {
  background-color: #efefef !important;
}

::v-deep .inputForm .el-form-item__content > .el-select {
  width: 80% !important;
}

::v-deep .inputForm .el-form-item__content > .el-cascader {
  width: 80% !important;
}

::v-deep .inputForm .el-form-item__content > .el-input {
  width: 80% !important;
}

::v-deep .popup .el-drawer > .el-drawer__header {
  background: #fff;
  margin: 0px;
  padding: 7px 10px 7px 20px;
  z-index: 100;
  /* margin: 0px 10px 0px 0px; */
}

::v-deep .popup .el-tabs--border-card {
  -webkit-box-shadow: none;
}

.el-col {
  height: 80px;
}

.transportpoolData {
  padding: 10px 15px;
  background-color: #fff;
}

.operationdata {
  height: 30px;
  padding: 5px 30px;
  border-color: #92d6ff;
  background-color: #e6f7ff;
}

.header {
  /* height: 30px; */
  width: 100%;
  margin: 0px 0px 10px 0px;
  /* background: blue; */
  display: flex;
  justify-content: space-between;
}

.header_right {
  float: right;
  display: flex;
}

.remodername .number {
  height: 20px;
  display: block;
}

.remodername:hover .number {
  display: none;
}

.remodername .remodercenter {
  display: none;
  color: #161414;
}

.remodername:hover .remodercenter {
  height: 20px;
  display: block;
  color: #262424;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.footer {
  position: absolute;
  width: 100%;
  height: 46px;
  background: #ffffff;
  z-index: 100;
  bottom: 0px;
}

.rule_title {
  display: flex;
  align-items: center;
  /* padding-bottom: 18px; */
  /* padding-top: 8px; */
  font-size: 14px;
  font-weight: bold;
  justify-content: space-between;
  margin-bottom: 10px;

  .title-l {
    display: flex;
    align-items: center;
  }

  .icon_left {
    display: inline-block;
    width: 6px;
    height: 16px;
    background: #f1a357;
    margin-right: 6px;
  }
}
</style>